<template>
  <ElSteps
    ref="els"
    @nextVal="nextVal"
    @backVal="backVal"
    @complete="complete"
    :dynamicData="dyData"
  ></ElSteps>
  <el-container>
    <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
      <keep-alive>
        <component :is="currCment" />
      </keep-alive>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import type { FormInstance, FormRules, FormProps } from "element-plus";
import ElSteps from "../components/utils/ElSteps.vue";
import Purposes from "../purposes/Purposes.vue";
import AssistDemand from "../purposes/AssistDemand.vue";
import AssistDosage from "../purposes/AssistDosage.vue";
import AssistMaterialDetails from "../purposes/AssistMaterialDetails.vue";
import Material from "../purposes/Material.vue";
import MaterialsFixed from "../purposes/MaterialsFixed.vue";
import UserInformation from "../purposes/admin/UserInformation.vue";
import RoleInformation from "../purposes/admin/RoleInformation.vue";
import MenuMaintenance from "../purposes/admin/MenuMaintenance.vue";
import ButtonInformation from "../purposes/admin/ButtonInformation.vue";
import K3wh from "../views/mc/K3wh.vue";
import Dejz from "../views/mc/Dejz.vue";
import MoXiao from "../views/mc/MoXiao.vue";
import Hc from "../views/mc/Hc.vue";
import Abnormal from "../views/mc/Abnormal.vue";
import Home from "../purposes/Home.vue";
import CS from "../purposes/CS.vue";
import DemoText from "../purposes/DemoText.vue";
import Test from "../views/mc/Test.vue";
import Test1 from "../views/mc/Test1.vue";
import Test2 from "../views/mc/Test2.vue";
import XXX from "../views/mc/XXX.vue";
import Demo from "../purposes/Demo.vue";
// 跳转页面
const cach = reactive<string[]>([]);
const currCment = ref(Home);

const els = ref<any>(null);
const labelPosition = ref<FormProps["labelPosition"]>("right");
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});
const dyData = [
  { id: 1, title: "创建账户" },
  { id: 3, title: "填写基础信息" },
  { id: 5, title: "填写用户信息" },
  { id: 4, title: "进行中" },
  { id: 5, title: "注册成功" },
];
const aa = () => {
  els.value.dynamicData = dyData;
  els.value.successTitle = "步骤完成";
};
const complete = (val) => {
  console.log(val);
  currCment.value = Home;
};
const nextVal = (val) => {
  console.log(val);
  switch (val.params) {
    case 1:
      currCment.value = Purposes;
      break;
    case 2:
      currCment.value = DemoText;
      break;
    case 3:
      currCment.value = Dejz;
      break;
    case 4:
      currCment.value = "";
      break;
  }
};
const backVal = (val) => {
  console.log(val);
  switch (val.params) {
    case 1:
      currCment.value = Purposes;
      break;
    case 2:
      currCment.value = DemoText;
      break;
    case 3:
      currCment.value = Dejz;
      break;
    case 4:
      currCment.value = "";
      break;
  }
};
onMounted(() => {
  aa();
});
</script>
<style scoped></style>

